<script setup>
import {message} from "ant-design-vue";
import {SearchOutlined, WhatsAppOutlined, MailOutlined, HomeOutlined} from '@ant-design/icons-vue';
import {ref} from 'vue';

let isOpenWin = ref(false);

function openWin() {
  isOpenWin.value = true;
}

function handleOk() {
  isOpenWin.value = false;
}

let props = defineProps({
  CurrentUserName: {
    type: String,
    default: '姚磊岳',
  },
  UserPic: {
    type: String,
    default: "/src/assets/yao.jpeg"
  }
})

function popInfo() {
  message.info("asdfasdf")
}

function reLogin() {
  location.href = "/";
}

let emit=defineEmits(['backToFrontpage']);
function backToFrontpage(){
  emit('backToFrontpage', '');
}
</script>

<template>
  <a-modal v-model:open="isOpenWin" title="修改密码" @ok="handleOk" width="480px">
    增加业绩的页面添加到这里。<br>
    增加业绩的页面添加到这里。<br>
    增加业绩的页面添加到这里。<br>
    增加业绩的页面添加到这里。<br>
    增加业绩的页面添加到这里。<br>
    增加业绩的页面添加到这里。<br>
    增加业绩的页面添加到这里。<br>
  </a-modal>
  <div>
    <img src="/src/assets/logo.png" alt="" class="logo"/>
  </div>
  <div class="SystemTitle_Chinese">
    多用户在线记账系统 v1.0
  </div>
  <div class="SystemTitle_Eng">
    Multi-user Online Financial Book System v1.0
  </div>
  <ul class="quickIcon">
    <li title="返回首页" @click="backToFrontpage">
      <div class="quickImg">
        <HomeOutlined/>
      </div>
      <div class="quickTitle">返回首页</div>
    </li>
    <li title="技术支持">
      <a-tooltip>
        <template #title>
          瀚岳信息技术团队：<br>
          操作咨询：杜思寒（14708295810）<br>
          <span style="margin-left: 70px">甘初豪（18379366793）</span><br>
          审核咨询：熊科云（13870094778）
        </template>
        <div class="quickImg">
          <WhatsAppOutlined/>
        </div>
        <div class="quickTitle">技术支持</div>
      </a-tooltip>
    </li>
    <li title="消息提示">
      <a-badge count="5" style="position: absolute;top:7px;margin-left: 25px">
      </a-badge>
      <a-popover title="待办消息提醒">
        <template #content>
          <div>
            1. 业绩提交，截止：2025-12-31 <br>
            2. 已完成业绩审核：6个<br>
            3. 待完成业绩审核：11个<br>
          </div>
        </template>
        <div class="quickImg">
          <MailOutlined/>
        </div>
        <div class="quickTitle">消息提示</div>
      </a-popover>

    </li>
    <li title="操作说明">

      <div class="quickImg">
        <SearchOutlined/>
      </div>
      <div class="quickTitle">操作说明</div>
    </li>
  </ul>
  <div class="currentUser">
    <a-dropdown>
      <a class="ant-dropdown-link">
        {{ CurrentUserName }}
        <span style="font-size: 6px;margin-left: 5px">◢</span>
      </a>
      <template #overlay>
        <a-menu>
          <a-menu-item @click="reLogin">
            重新登录
          </a-menu-item>
          <a-menu-item @click="openWin">
            修改密码
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
  <div class="Anatar" :style="{backgroundImage:'url('+UserPic+')'}"></div>

</template>

<style scoped>
.logo {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 10px;
  top: 5px;
}

.SystemTitle_Chinese {
  font-size: 22px;
  font-family: "等线", monospace;
  font-weight: bold;
  color: #FFF;
  letter-spacing: 1px;
  position: absolute;
  left: 60px;
  top: -8px;
}

.SystemTitle_Eng {
  font-size: 13px;
  font-family: "Times New Roman", Times, serif;
  color: #FFF;
  letter-spacing: 0.1px;
  position: absolute;
  left: 60px;
  top: 12px;
}

.Anatar {
  position: absolute;
  right: 10px;
  top: 8px;
  height: 35px;
  width: 35px;
  background-size: contain;
  border-radius: 17px;
}

.currentUser {
  position: absolute;
  right: 60px;
  color: #FFF;
  font-size: 12pt;
  font-family: "宋体", "Times New Roman", Times, serif;
  cursor: pointer;
}

.quickIcon {
  text-decoration: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  right: 200px;
  font-size: 20px;
  color: #fff;
  top: -10px
}

.quickIcon li {
  float: left;
  cursor: pointer;
  width: 90px;
  text-align: center;
  font-family: "宋体", "Times New Roman", Times, serif;
}

.quickImg {
  height: 20px;
  width: 100%;
}

.quickTitle {
  font-size: 12px;
  font-family: "宋体", "Times New Roman", Times, serif;
}
</style>